<template>
  <div class="app-container">
    <div class="main">
      <div class="foot">
        <el-form ref="form"
                 class="foot-content"
                 :rules="rules"
                 :model="form"
                 label-width="120px">
          <div class="table-title"
               style="margin-bottom:20px">
            <span class="title-text">用户信息</span>
          </div>
          <div style="display:flex;justify-content: space-between">
            <el-col :span="12">
              <el-form-item label="用户名："
                            prop="name">
                <el-input v-model="form.name"
                          class="inputstyle" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="账号："
                            prop="username">
                <el-input v-model="form.username"
                          class="inputstyle" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="密码："
                            prop="password">
                <el-input v-model="form.password"
                          class="inputstyle" />
              </el-form-item>
            </el-col>
          </div>
          <div style="display:flex;justify-content: space-between">
            <el-col :span="12">
              <el-form-item label="真实姓名："
                            prop="idname">
                <el-input v-model="form.idname"
                          class="inputstyle" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="联系电话："
                            prop="iphone">
                <el-input v-model="form.iphone"
                          class="inputstyle" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="证件号："
                            prop="idnumber">
                <el-input v-model="form.idnumber"
                          class="inputstyle" />
              </el-form-item>
            </el-col>
          </div>

          <div style="display:flex;justify-content: space-between">
            <el-col :span="8">
              <el-form-item label="性别："
                            prop="sex">
                <el-radio v-model="form.sex"
                          :label="1">男</el-radio>
                <el-radio v-model="form.sex"
                          :label="2">女</el-radio>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="邮箱地址："
                            prop="email">
                <el-input v-model="form.email"
                          class="inputstyle" />
              </el-form-item>
            </el-col>
            <el-col :span="8" />
          </div>

          <div v-if="form.level == 1 || form.isuserup == 1">
            <div class="table-title"
                 style="margin-bottom:20px">
              <span class="title-text">企业信息</span>
            </div>
            <div style="display:flex;justify-content: space-between">
              <el-col :span="12">
                <el-form-item label="企业名称："
                              prop="company_name">
                  <el-input v-model="form.campany_name"
                            class="inputstyle" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="企业代码："
                              prop="company_code">
                  <el-input v-model="form.company_code"
                            class="inputstyle" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="法人："
                              prop="company_user">
                  <el-input v-model="form.company_user"
                            class="inputstyle" />
                </el-form-item>
              </el-col>
            </div>
            <div style="display:flex;justify-content: space-between">
              <el-col :span="12">
                <el-form-item label="企业电话："
                              prop="company_iphone">
                  <el-input v-model="form.company_iphone"
                            class="inputstyle" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="企业地址："
                              prop="company_address">
                  <el-input v-model="form.company_address"
                            class="inputstyle" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="营业执证："
                              prop="company_idnumber">
                  <el-input v-model="form.company_idnumber"
                            class="inputstyle" />
                </el-form-item>
              </el-col>
            </div>
            <div style="display:flex;justify-content: space-between">
              <el-col :span="8">
                <el-form-item label="企业邮箱："
                              prop="company_email">
                  <el-input v-model="form.company_email"
                            class="inputstyle" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="企业传真："
                              prop="company_fax">
                  <el-input v-model="form.company_fax"
                            class="inputstyle" />
                </el-form-item>
              </el-col>
              <el-col :span="8" />
            </div>
          </div>

          <el-form-item style="display:flex;justify-content: space-between;">
            <el-button type="primary"
                       @click="updateForm('form')">保存修改</el-button>
            <el-button style="margin-left:50px"
                       @click="auditForm('form')">提交审核</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>

  </div>
</template>
<script>
import usersApi from '@/api/users'
// import ImageCropper from '@/components/ImageCropper'
// import PanThumb from '@/components/PanThumb'

export default {
  // components: { ImageCropper, PanThumb },
  data () {
    return {
      form: {
      },
      // 上传弹框组件是否显示
      imagecropperShow: false,
      imagecropperKey: 0, // 上传组件key值
      BASE_API: process.env.BASE_API, // 获取dev.env.js里面地址
      saveBtnDisabled: false // 保存按钮是否禁用,
    }
  },
  watch: { // 监听
    $route (to, from) { // 路由变化方式，路由发生变化，方法就会执行
      this.init()
    }
  },
  created () { // 页面渲染之前执行
    this.init()
  },
  methods: {
    init () {
      // 判断路径有id值,做修改
      if (this.$route.params && this.$route.params.id) {
        // 从路径获取id值
        const id = this.$route.params.id
        console.log('id:', id)
        // 调用根据id查询的方法
        this.getInfo(id)
      } else { // 路径没有id值，做添加
        // 清空表单
        this.form = {}
      }
    },
    // 根据讲师id查询的方法
    getInfo (id) {
      usersApi.getUserInfo(id)
        .then(response => {
          console.log('用户信息', response.data[0])
          this.form = response.data[0]
        })
    },
    // 修改讲师的方法
    updateForm () {
      this.form.update_time = this.utils.getNowTime()
      usersApi.updateUsersInfo(this.form)
        .then(response => {
          // 提示信息
          this.$message({
            type: 'success',
            message: '修改成功!'
          })
          console.log('修改成功，', response)
          // 回到列表页面 路由跳转
          this.$router.push({ path: '/users/index' })
        })
    },
    auditForm () {
      this.$confirm('', '确认审核', {
        confirmButtonText: '通过',
        cancelButtonText: '不通过',
        type: 'info',
        center: true
      }).then(() => {
        this.form.level = '1'
        this.form.isuserup = null
        this.form.update_time = this.utils.getNowTime()
        usersApi.updateUsersInfo(this.form)
          .then(response => {
            // 提示信息
            console.log(response)
            this.$message({
              type: 'success',
              message: '审核通过'
            })
            // 回到列表页面 路由跳转
            this.$router.push({ path: '/users/index' })
          })
      }).catch(() => {
        this.form.level = '0'
        this.form.isuserup = '1'
        this.form.update_time = this.utils.getNowTime()
        usersApi.updateUsersInfo(this.form)
          .then(response => {
            // 提示信息
            console.log(response)
            this.$message({
              type: 'warning',
              message: '审核不通过'
            })
            // 回到列表页面 路由跳转
            this.$router.push({ path: '/users/index' })
          })
      })
    }
  }
}
</script>

<style lang="less" scoped>
.table-title {
  border-bottom: 1px solid #ddd;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  height: 34px;
}
.title-text {
  color: #000;
  font-size: 16px;
  padding-top: 4px;
  font-weight: 700;
  border-bottom: 2px solid #07467c;
}
.inputstyle {
  width: 250px;
}
</style>
